<template>
	
		
		   
		    <el-menu
			  default-active="2"
		      class="el-menu-vertical-demo"
		      
		      background-color="#242731"
		      text-color="#fff"
			  router
		      active-text-color="#ffd04b">
		     
			
				 <el-menu-item index="/server" >
				   
				   <span slot="title">链接测试</span>
				 </el-menu-item>
		      
	
			  <el-menu-item   v-for="(item ,index) in messages" :key="index" v-if="item.value != '' && item.address == index " :index=item.router  @click="onclick(item.router)">
				  <div style="overflow: hidden; text-overflow: ellipsis;">
			    <span slot="title" >{{ item.wenben }}</span>
			
				</div>
				<i class="el-icon-close"  @click="close(100+index)" style="position: absolute; top: 35%; left: 85%;"></i>
			  </el-menu-item>
			  
			  

			  
			<!-- 
			  <el-menu-item index="index5" v-if="messages[0].address == 0" style="width: 198px;  position: relative; ">
				  <div style="overflow: hidden; text-overflow: ellipsis;">
					  <span slot="title" style="overflow: hidden;">{{ messages[0].value }}</span>
				  </div>
			     
				 <i class="el-icon-close"  @click="close(100)" style="position: absolute; top: 35%; left: 85%;"></i>
			   </el-menu-item>
			  
			
			   <el-menu-item index="" v-if="messages[1].address == 1" style="width: 198px; :  position: relative;" >
				  <i class="el-icon-close" style="position: absolute; top: 35%; left: 85%;" @click="close(100+1)"></i>
				  <div style="overflow: hidden; text-overflow: ellipsis;">
					   <span slot="title">{{ messages[1].value }}</span>
				  </div>
				</el-menu-item> -->

				
				<el-menu-item index="index4" >
			    <span slot="title">添加属性</span>
			  </el-menu-item>
				<el-menu-item index="index5" >
			    <span slot="title">后期处理体积</span>
			  </el-menu-item>
			<el-menu-item index="DirectionalLight" >
			    <span slot="title">太阳</span>
			  </el-menu-item>
			  <el-menu-item index="index2" >
			      <span slot="title">BP天光</span>
			    </el-menu-item>
			
			<el-menu-item index="BodyMap" >
			    <span slot="title">实体位置</span>
			  </el-menu-item>
			  
			  
			  <el-submenu>
			            <template slot="title">设备一</template>
<el-menu-item index="PlayTime">播放时间设置</el-menu-item>
<el-menu-item index="PlaySetup">播放切换设置</el-menu-item>
</el-submenu>
<el-submenu>
    <template slot="title">设备二</template>
    <el-menu-item index="1-4-1">播放时间设置</el-menu-item>
    <el-menu-item index="1-4-1">播放切换设置</el-menu-item>
</el-submenu>
<!-- <el-menu-item index="BodyMap" >
			      <span slot="title">设备一</span>
			    </el-menu-item>
				<el-menu-item index="BodyMap" >
				    <span slot="title">设备二</span>
				  </el-menu-item>
 -->

</el-menu>




</template>

<script>
    export default {
        name: 'Aside',
        data() {
            return {


            }
        },
        mounted() {

        },


        computed: {
            messages() {
                return this.$store.state.address
            }

        },

        methods: {
            onclick(n) {
                this.$router.push({
                    path: n,
                    query: {
                        name: n
                    }
                })
            },
            close(item) {

                let upaddress = item - 100
                let index = this.$store.state.address[upaddress]
                index.address = 998




            },


        }

    }
</script>

<style>
    .el-menu-item {
        min-width: 199px;
        font-size: 18px
    }
    
    .el-icon-close {
        position: relative;
        top: 0px;
        right: 0px;
    }
    
    .el-menu {
        border-right: 0!important;
    }
    
    .el-submenu__title {
        font-size: 18px;
    }
</style>